<template>
	<view class="content">
		<!--关联信息-->
		<view class="btName">关联信息</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">工单标题</text>
			<view class="width276 color333 flexC" v-if="cardInfo.name">
				<text>{{cardInfo.name}}</text>
			</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">紧急程度</text>
			<view v-if="cardInfo.level_arr" class="width276 color333">{{cardInfo.level_arr.name}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">工单状态</text>
			<view v-if="cardInfo.status_arr" class="width276 color333">{{cardInfo.status_arr.name}}
			</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">工单内容</text>
			<view v-if="cardInfo.content" class="width276 color333">{{cardInfo.content}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">处理人员</text>
			<view v-if="cardInfo.deal_user_name" class="width276 color333">{{cardInfo.deal_user_name}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">通知人员</text>
			<view v-if="cardInfo.notify_user_name" class="width276 color333">{{cardInfo.notify_user_name}}</view>
			<view v-else class="width276">暂无</view>
		</view>

		<!--系统信息-->
		<view v-if="cardInfo.deal_remark">
			<view class="btName">处理结果</view>
			<view class="flex-white-plr26 ptb20 bdb_f5">
				<view v-if="cardInfo.deal_remark" class="width276 color333">{{cardInfo.create_user_name}}</view>
				<view v-else class="width276">暂无</view>
			</view>
		</view>

		<!--系统信息-->
		<view class="btName">系统信息</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">创建人</text>
			<view v-if="cardInfo.create_user_name" class="width276 color333">{{cardInfo.create_user_name}}</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">创建时间</text>
			<view v-if="cardInfo.create_time" class="width276 color333">{{cardInfo.create_time}}
			</view>
			<view v-else class="width276">暂无</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">更新时间</text>
			<view v-if="cardInfo.update_time" class="width276 color333">{{cardInfo.update_time}}
			</view>
			<view v-else class="width276">暂无</view>
		</view>

		<view class="bottomClass">
			<view class="bottomBox">
				<view class="tabbarItem" v-if="cardInfo.status == 0" @click="allotFun">
					<u-icon class="tabImg" size="40" name="setting"></u-icon>
					<view>分配</view>
				</view>
				<view class="tabbarItem" v-else @click="sheetShowFun('add')">
					<u-icon class="tabImg" size="40" name="plus-circle"></u-icon>
					<view>处理</view>
				</view>
				<view class="tabbarItem" @click="pageBianjiFun">
					<u-icon class="tabImg" size="40" height="40" name="edit-pen-fill"></u-icon>
					<view>编辑</view>
				</view>
				<view class="tabbarItem" @click="deleteDataFun">
					<u-icon class="tabImg" size="40" height="40" name="trash"></u-icon>
					<view>删除</view>
				</view>
			</view>
		</view>
		
		<u-select v-model="allotShow" mode="single-column" confirm-text="确认分配" cancel-text="取消分配" :list="userList"
			@confirm="allotConfirmFun" value-name="id" label-name="realname"></u-select>
		
	</view>
</template>

<script>
	let that = '';
	import {
		apiOaService
	} from '@/api/workorder.js'
	import {apiSysUser} from '@/api/admin.js'

	import bottomBox from '@/components/bottomBox/bottomBox.vue'
	import getMore from '@/components/getMore/getMore.vue'
	export default {
		components: {
			bottomBox,
			getMore
		},
		data() {
			return {
				selectList: [],
				jieDuanIndex: 0,
				
				stateIndex: 0,
				cardInfo: {},
				dataList: [],
				sheetList: [{
						text: '更换负责人'
					},
					{
						text: '放入客户池'
					},
					{
						text: '删除'
					}
				],
				sheetType: '',
				allotShow: false,
				userList: [],
				tabIndex: 0,
				refresherStatus: 0,
				cardIndex: -1,
				isLoadSelectKhById: false
			}
		},
		onLoad(e) {
			that = this;
			that.cardIndex = e.index || -1;
			that.cardInfo = uni.$cardInfo || {};
			uni.setNavigationBarTitle({
				title: that.cardInfo.name || '线索详情'
			})
			//加载详细数据			
			if (e.fromDetail) {
				that.selectKhByIdFun(e.id)
			}

		},
		onBackPress(e) {
			if (e.from == 'backbutton' && this.cardIndex != -1) {
				uni.$emit('updateListByIndex', {
					index: this.cardIndex,
					obj: this.cardInfo
				})
			}
		},
		onShow() {
			if (that.isLoadSelectKhById) {
				that.selectKhByIdFun();
			}
		},
		methods: {
			// 新增跟进信息
			pageGenjinFun: function() {
				let url = '../cst_clue_trace/add?clue_name=' + that.cardInfo.name + '&clue_id=' + that.cardInfo.id
				console.log(url);
				uni.navigateTo({
					url
				})
			},
			// 修改客户信息
			pageBianjiFun: function() {
				uni.$infoObj = that.cardInfo;
				uni.navigateTo({
					url: './add?type=update'
				})
			},
			// 新增sheet回调方法
			pageAddSheetFun: function(e) {

			},
			// 更多回调方法
			pageDeleteShowFun: function(e) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除客户名称为：' + that.cardInfo.name + '的线索吗?',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...',
								mask: true
							})
							let reqData = {
								action: 'del',
								params: {
									req: {
										id: that.cardInfo.id,
									}
								}
							}
							apiClue(reqData)
								.then(res => {
									uni.showToast({
										title: '删除成功!',
										duration: 100,
										icon: 'none'
									})
									uni.$emit('deleteKhFun', {
										index: that.cardIndex
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 666)
								})
						}
					}
				})
			},
			// 根据id查询客户
			selectKhByIdFun: function(id) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let reqData = {
					action: 'get_detail',
					params: {
						id: ''
					}
				}
				if (id) {
					reqData.params.id = id;
				} else {
					reqData.params.id = that.cardInfo.id;
				}
				apiOaService(reqData)
					.then(res => {
						let data = res.data;
						if (data) {
							that.cardInfo = data;
							setTimeout(() => {
								//延时关闭  加载中的 loading框
								uni.hideLoading()
							}, 888)
						} else {
							uni.showModal({
								title: '提示',
								content: '相关内容不存在，或者已被删除！',
								showCancel: false,
								success() {
									uni.navigateBack()
								}
							})
						}
					})
			},

			// 分配工单
			allotFun: function() {
				if (this.userList.length > 0) {
					this.allotShow = true;
				} else {
					this.getSysUserSonsFun(); //获得部门用户
				}
			},
			// 分配工单
			allotConfirmFun: function(e) {
				let obj = e[0];
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否确认将工单：' + that.cardInfo.service_no + '的线索分配给 - ' + obj.label + ' - 吗?',
					success(res) {
						let time = new Date().getTime();
						if (res.confirm) {
							uni.showLoading({
								title: '分配中...',
								mask: true
							})
							let reqData = {
								action: 'distribute',
								params: {
									req: {
										id: that.cardInfo.id,
										openstatus: 1, // 分配
										deal_user_id: obj.value, //分配给用户id
									}
								}
							}
							apiOaService(reqData)
								.then(res => {
									that.$emit('cxPGetDataFun', '分配成功');
									uni.showToast({
										title: '更新成功！',
										duration: 1600,
										icon: 'none',
										mask: true
									})
								})
						}
					}
				})
			},
			// 获取管理用户ids
			getSysUserSonsFun: function() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let reqData = {
					action: 'get_sys_user_sons',
					params: {

					}
				}
				apiSysUser(reqData)
					.then(res => {
						this.userList = res.data;
						this.allotShow = true;
						uni.showToast({
							title: '加载成功！',
							duration: 1600,
							icon: 'none',
							mask: true
						})
					})
			},

		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
		padding-bottom: 88px;
	}

	.color333 {
		color: #666666;
	}

	.btName {
		margin-bottom: 16rpx;
	}

	.flexC {
		display: flex;
		align-items: center;
	}

	.p8Img {
		padding: 8rpx;
		width: 40rpx;
		height: 40rpx;
		margin-left: 16rpx;
	}

	.p8 {
		padding: 8rpx;
	}

	.noMoreTs {
		width: 100%;
		margin: 32rpx 0;
		text-align: center;
	}

	.bottomClass {
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.bottomBox {
		width: 100%;
		height: 55px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
		border-top: 1rpx solid #DDDDDD;
		font-size: 14px;
	}

	.tabbarItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding: 0 36rpx;
	}

	.tabbarItem:active {
		background-color: #EEEEEE;
	}

	.tabbarItem>.tabImg {
		margin-bottom: 8rpx;
	}
</style>